﻿<template>
  <div class="login_container" id="login_container">
    <div>
      <div ref="login" class="login">
        <div class="login_fields">
          <div class="login_fields__user">
            <div class="icon">
              <img alt="" src="../../../static/img/user_icon_copy.png"/>
            </div>
            <input type="text" placeholder="登录用户名" v-model="username" maxlength="16" autocomplete="off" @focus="userFocus('username')"/>
            <div class="validation">
              <img alt="" src="../../../static/img/tick.png"/>
            </div>
          </div>
          <div class="login_fields__password">
            <div class="icon">
              <img alt="" src="../../../static/img/lock_icon_copy.png"/>
            </div>
            <input type="password" placeholder="密码" v-model="password" maxlength="16" autocomplete="off" @focus="userFocus('password')" @keydown="keyDown" />
            <div class="validation">
              <img alt="" src="../../../static/img/tick.png" />
            </div>
            <p style="margin-left:60px;font-size:12px;" v-if="show">用户名或密码不能为空</p>
          </div>
          <div class="login_fields__submit">
            <input type="button" value="登录" @click="login" v-if="showBtn" />
            <input type="button" value="登录中" @click="login" v-if="isShow" />
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {localStorage} from 'js/localStorage'
  import socket from 'js/socket'
  import Pubsub from "pubsub.js"
  export default {
    data() {
      return {
        time: '',
        date: '',
        username: '',
        password: '',
        token:'',
        accessToke:'',
        show:false,
        showBtn:true,
        isShow:false,
        ruleForm2:{
          username:'',
          password:''
        },
        rules:{
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 30, message: '长度在 3 到30 个字符', trigger: 'blur' }
            ],
            password:[
              { required: true, message: '请输入密码', trigger: 'change' },
            ]
        }
      }
    },
    methods: {
      //回车
      keyDown(e){
          if(e.keyCode == 13){
            this.login()
          }
      },
      //登陆
      login() {
        let _this=this
        if(this.username==''|| this.password==''){
           this.show=true;
        }else{
          //  this.$loading.show()
            let parmas = {
              username: this.username,
              password: this.password
            }
            let success = data => {
              if (data.code == 'OK') {
                //获取userId
                localStorage.set('userID',data.data.userId)
                //获取用户名
                localStorage.set('user',data.data.name)
                //获取token
                this.token=data.data.session
                localStorage.set('accessToken',this.token)
                socket.onCenten()
                this.$router.push({
                  path:'/commodity-info'
                  // path:'/home'
                })
                //根据后台返回的路径进行页面的跳转
                localStorage.set('url',JSON.stringify(data.data.resUrl))

                this.isShow=true
                this.showBtn=false
                this.$notify({
                    title: '提示',
                    message: '你已成功登陆该系统',
                    type:'success'
                })
                let _this=this
                Pubsub.subscribe('socketData',function(item){
                if(item){
                  _this.$notify.success({
                    title: '提示',
                    message:item,
                    // duration: 0
                  });
                }
                })
              } else {
                return this.$message.error(data.msg)
              }
            }
          this.api.login(parmas, success)
        }
      },
      userFocus(type){
        if(type=="username"){
          this.show=false
        }else{
          this.show=false
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.login()
          } else {
            return false;
          }
        });
      },
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../static/css/styles.css";
  @import "../../../static/css/demo.css";
  @import "../../../static/css/loaders.css";
  .login_container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    line-height: 24px;
    font: 16px Helvetica;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #242645;
    color: #fff;
    background-size: cover;
    /*background-attachment:fixed ;//随着页面的滚动，背景图不会滚动*/
    background-image: url("../../../static/img/logo.jpg");
    perspective: 800px;
    overflow: hidden;
  }
  .welcome{
    margin-top:70px;
  }

</style>




